import { Component, ElementRef, HostListener, OnInit, Renderer2 } from '@angular/core';
import { MemberVo } from 'src/app/model/member-vo';
import { MemberStorageService } from 'src/app/services/member-storage.service';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-side-member-panel',
  templateUrl: './side-member-panel.component.html',
  styles: [``],
  animations: [
    trigger('octrigger', [
      state('openS', style({
        right: '0'
      })),
      state('closeS', style({
        right: '-261px'
      })),
      transition('openS => closeS', [
        animate('500ms')
      ]),
      transition('closeS => openS', [
        animate('500ms')
      ]),
    ])
  ]
})
export class SideMemberPanelComponent implements OnInit {
  public memberPanelData: any = {
    nickname: 'Guest',
    signature: 'No signature',
    avatar: '',
    status: '',
    role: '',
    group: '',
    color: '',
    id: -1
  }
  private opened: boolean = false;

  constructor(
    private elementRef: ElementRef,
    private renderer2: Renderer2,
    private memberStorage: MemberStorageService) {

  }

  ngOnInit(): void {
    this.queryMember();
  }

  private queryMember():void{
    let curMember: MemberVo | null = this.memberStorage.get();
    this.memberPanelData.nickname = curMember?.nickname??'游客';
    this.memberPanelData.color = curMember?.style??'guest';
    if(curMember && curMember.signature && curMember.signature.length>0){
      this.memberPanelData.signature = curMember.signature;
    }else{
      this.memberPanelData.signature = '未定义个性签名';
    }
    this.memberPanelData.status = curMember?.statusTitle??'-';
    this.memberPanelData.role = curMember?.roleTitle??'-';
    this.memberPanelData.group = curMember?.groupTitle??'-';
    this.memberPanelData.avatar = curMember?.avatar??'';
    this.memberPanelData.id = curMember?.id??0;
  }

  //打开侧边栏
  public open() {
    if(this.opened){
      return;
    }
    //重新更新信息,防止信息滞后
    this.queryMember();
    let bdrawer: HTMLElement = this.elementRef.nativeElement;
    this.renderer2.setStyle(bdrawer.querySelector('#member-side-panel'), 'right', '0');
    this.opened = true;
  }

  //关闭侧边栏
  public closePanel(event: Event|null): void {
    if(!this.opened){
      return;
    }
    let bdrawer: HTMLElement = this.elementRef.nativeElement;
    this.renderer2.setStyle(bdrawer.querySelector('#member-side-panel'), 'right', '-261px');
    this.opened = false;
  }
  //二, 点击非侧边栏的区域关闭侧边栏
  //一, 见AppComponent
  @HostListener('document:click', ['$event'])
  private clickout(event:Event) {
    //触发的元素不能是'sidePanelDrawer'
    let targetEle:HTMLElement = event.target as HTMLElement;
    if(!this.checkSidePanelDrawerAnchor(targetEle)){
      return;
    }
    
    if(this.elementRef.nativeElement.contains(targetEle)) {
      //console.log("[SideMemberPanel-CMP]clicked inside");
    } else {
      //console.log("[SideMemberPanel-CMP]clicked outside> "+this.opened);
      if(this.opened){
        this.closePanel(event);
      }
    }
  }
  //检查触发的元素是否可以忽略
  //若html元素结构变化此方法将无效:<div><a class="sidePanelDrawer,..."><i>ico</i></a></div>
  private checkSidePanelDrawerAnchor(ele:HTMLElement): boolean{
    let spdEle: HTMLElement | null = null;
    if(ele.tagName.toLowerCase() === 'i'){
      spdEle = ele.parentElement;
    }
    if(ele.tagName.toLowerCase() === 'a'){
      spdEle = ele;
    }
    if(ele.tagName.toLowerCase() === 'div'){
      spdEle = ele.firstElementChild as HTMLElement;
    }
    if(spdEle !== null && spdEle.classList.contains('sidePanelDrawer')){
      return false;
    }
    return true;
  }
}
